import React, { useState, useEffect, useRef } from 'react';
import { Easing, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView, Dimensions, Animated, PanResponder, Modal, TouchableHighlight } from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
import { AntDesign } from '@expo/vector-icons';
import ActionButton from 'react-native-action-button';
import { Progress, Popover } from 'antd-mobile-rn';
import { LinearGradient } from 'expo-linear-gradient';
import axios from '../../api/axios';
import { useAuth, baseURL } from '../../context/AuthProvider';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Axios } from 'axios';
import { useFocusEffect } from '@react-navigation/native';

// const baseURL = require('../../context/AuthProvider')
console.log(baseURL);
// import * as axios1 from 'axios';
// import Progress from '@ant-design/react-native/lib/progress';
const add = (m) => { return m < 10 ? '0' + m : m }
//将时间戳转为普通格式
const fortime = (shijianchuo) => {
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y + '-' + add(m) + '-' + add(d) + ' ' + add(h) + ':' + add(mm) + ':' + add(s);
}
//计算两个时间之间的时间差 多少天时分秒
const intervalTime = (startTime, endTime) => {
    // var timestamp=new Date().getTime(); //计算当前时间戳
    var timestamp = (Date.parse(new Date())) / 1000;//计算当前时间戳 (毫秒级)
    var date1 = ""; //开始时间
    if (timestamp < startTime) {
        date1 = startTime;
    } else {
        date1 = timestamp; //开始时间
    }
    var date2 = endTime; //结束时间
    // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
    var date3 = (date2 - date1) * 1000; //时间差的毫秒数
    //计算出相差天数
    var days = Math.floor(date3 / (24 * 3600 * 1000));
    //计算出小时数

    var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
    var hours = Math.floor(leave1 / (3600 * 1000));
    //计算相差分钟数
    var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
    var minutes = Math.floor(leave2 / (60 * 1000));

    //计算相差秒数

    var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
    var seconds = Math.round(leave3 / 1000);
    console.log(days + "天 " + hours + "小时 ")
    // return   days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
    return days + "天 " + hours + "小时 "
}

const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: "center",
                alignItems: "center",
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#FFF', fontSize: 18 }}>{children}</Text>
        </TouchableOpacity>
    )
}
// 虚拟作物页面内容
const Page1 = ({ style, value }) => {
    const { navigation } = value
    const { user } = useAuth()
    const { index } = value
    // const { cropsid } = value
    const [cropList, setCropList] = useState(["点击切换"])
    var [rotateValue, setRotateValue] = useState(new Animated.Value(0))
    const [rotation, setRotation] = useState(new Animated.Value(0))
    const [mycrops, setMycrops] = useState([])
    const [eff, setEff] = useState(0)
    const [num, setNum] = useState(0)
    const [pot, setPot] = useState([])
    const [w, setW] = useState('100%')
    const [h, setH] = useState('100%')
    const [w1, setW1] = useState('100%')
    const [h1, setH1] = useState('100%')
    const [growth, setGrowth] = useState(mycrops[num] ? mycrops[num].growth : 0)
    const [background, setBackground] = useState([])
    const [bgimg, setBgimg] = useState()
    const [bgplace, setBgplace] = useState(0);
    const [showtip, setShowtip] = useState(false)
    const [tips, setTips] = useState([])
    const [temday, setTemday] = useState('')
    const [temnight, setTemnight] = useState('')
    const [bgweather, setBgweather] = useState("")  // =1晴，=2雨
    const [showinfo, setShowinfo] = useState(false)
    const [waternum, setWaternum] = useState(0)
    const [showwater, setShowwater] = useState(false)
    const nowday = fortime(new Date().getTime());
    const [toomuch, setToomuch] = useState(false)
    const [weather, setWeather] = useState()
    // var cropList = []

    const toAdd = () => {
        if (user) {
            navigation.navigate('addCrops');
        } else {
            alert("请先登录")
        }
    }
    const onChange = (index) => {
        setNum(index)
        console.log(mycrops[index].id);
        AsyncStorage.setItem('mycropsid', JSON.stringify([{ id: mycrops[index].id }, { cropsid: mycrops[index].cropid }]))
        axios.post('/crop/tip', { cropsid: mycrops[index].cropsid }).then(res => {
            setTips(res.data)
        })
        // axios.post('/recordlist/getrecordlist', { id: mycrops[index].id }).then(res => {
        //     console.log(res.data);
        //     setRecordlist(res.data)
        //     AsyncStorage.setItem('list', JSON.stringify(res.data))
        // })
    }
    const pan = useRef(new Animated.ValueXY()).current;
    const gradientColors = '-webkit-linear-gradient(left, #FF6B6B, #FFE66D)';
    // 拖动水壶动画
    const panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove: Animated.event([
            null,
            {
                dx: pan.x, // x,y are Animated.Value
                dy: pan.y,
            },
        ]),
        // 释放点击
        onPanResponderRelease: async () => {
            let mx = Number(JSON.stringify(pan.x))
            let my = Number(JSON.stringify(pan.y))
            // 获取x，y在花的范围内，先倾斜再回到初始位置
            if (my < -(0.01 * screenH) && my > -(0.4 * screenH) && mx < -(0.05 * screenW) && mx > -(0.5 * screenW)) {
                rotateValue.setValue(0)
                Animated.sequence([ // sequence组合动画令其顺序执行
                    // 
                    Animated.timing(
                        rotateValue,
                        {
                            toValue: -0.1,
                            duration: 800, // 动画持续的时间（单位是毫秒），默认为500
                            delay: 0, // 在一段时间之后开始动画（单位是毫秒），默认为0。
                            useNativeDriver: false
                        }
                    ),
                    Animated.timing(
                        rotateValue,
                        {
                            toValue: 0,
                            duration: 600, // 动画持续的时间（单位是毫秒），默认为500
                            // easing: Easing.linear, // 一个用于定义曲线的渐变函数
                            delay: 0, // 在一段时间之后开始动画（单位是毫秒），默认为0。
                            useNativeDriver: false
                        }
                    ),
                    Animated.spring(
                        pan, // Auto-multiplexed
                        { toValue: { x: 0, y: 0 } } // Back to zero
                    )
                ]).start()
                if (waternum <= 3) {
                    axios.post('/crop/updategrowth', { id: mycrops[num].id, growth: mycrops[num].growth }).then(res => {
                        if (res.code == 200) {
                            axios.post('/crop/getallmycrops', { userid: user.userid }).then(res => {
                                console.log(55555555);
                                setMycrops(res.data)
                            })
                        }
                    })
                } else if (waternum > 3) {
                    axios.post('/crop/updategrowth0', { id: mycrops[num].id, growth: mycrops[num].growth }).then(res => {
                        showToo()
                        if (res.code == 200) {
                            axios.post('/crop/getallmycrops', { userid: user.userid }).then(res => {
                                console.log(55555555);
                                setMycrops(res.data)
                            })
                        }
                    })
                }
                setWaternum(waternum + 1)


            } else { // 不在花的范围内，直接回到初始位置
                Animated.spring(
                    pan, // Auto-multiplexed
                    {
                        toValue: { x: 0, y: 0 },
                        useNativeDriver: false
                    }).start();
                return
            }
        },
    });
    const getimgW = (imageUri) => {
        Image.getSize(imageUri, (width, height) => {
            setW(screenW * 0.35)
            setH((height * screenW * 0.35) / width)
            return {
                width: screenW * 0.45,
                height: (height * screenW * 0.45) / width,
                resizeMode: 'contain'
            }
        })
    }
    const getimgW1 = (imageUri) => {
        Image.getSize(imageUri, (width, height) => {
            setW1(screenW * 0.3)
            setH1((height * screenW * 0.3) / width)
            return {
                width: screenW * 0.45,
                height: (height * screenW * 0.45) / width,
                resizeMode: 'contain'
            }
        })
    }
    const fetchData = async () => {
        let res = await axios.post('/crop/getallmycrops', { userid: user.userid })
        if (res) {
            setMycrops(res.data)
            setBgplace(res.data[num].bgplace)
            setCropList(res.cropname)
            AsyncStorage.setItem('mycropsid', JSON.stringify([{ id: mycrops[num].id }, { cropsid: mycrops[num].cropsid }]))
            console.log(999999999999);
            console.log(mycrops);
        }
        let res2 = axios({
            method: 'post',
            url: 'https://yiketianqi.com/free/week?unescape=1&appid=21379188&appsecret=h2vVMp6V&city=' + user.cityname,
            responseType: 'stream'
        })
        if (res2) {
            setTemday(JSON.parse(res2).data[0].tem_day)
            setTemnight(JSON.parse(res2).data[0].tem_night)
            setWeather(JSON.parse(res2).data[0])
            console.log(weather);
        }

    }
    const fetchData1 = async () => {
        let res1 = await axios.post('/crop/tip', { cropsid: mycrops[num].cropsid })
        if (res1) {
            setTips(res1.data)
        }
        if (weather.wea.indexOf("雨") != -1) {
            setBgweather(2)
            let selres = await axios.post('/background/getselbg', { bgplace: bgplace, bgweather: 2 })
            setBgimg(selres.data[0].bgimg)
            let bgres = await axios.post('/background/getbg', { bgweather: 2, bgplace: bgplace })
            setBackground(bgres.data)
        } else if(weather.wea.indexOf("雨") == -1){
            setBgweather(1)
            axios.post('/background/getselbg', { bgplace: bgplace, bgweather: 1 }).then(res => {
                // console.log(res.data[0].bgimg);
                setBgimg(res.data[0].bgimg)
            })
            axios.post('/background/getbg', { bgweather: 1, bgplace: bgplace }).then(res => {
                console.log(res.data);
                setBackground(res.data)
            })
        }

    }
    // const 
    useEffect(async() => {
        if (user) {
            await fetchData()
            await fetchData1()
            // 获取花盆图片
            axios.post('/flowerpot/getmypot', { potid: user.potid }).then(res => {
                setPot(res.data)
            })
        }
        else {
            axios({
                method: 'post',
                url: 'https://yiketianqi.com/free/week?unescape=1&appid=21379188&appsecret=h2vVMp6V&city=',
                responseType: 'stream'
            })
                .then(function (res) {
                    setTemday(JSON.parse(res).data[0].tem_day)
                    setTemnight(JSON.parse(res).data[0].tem_night)
                    console.log(res);
                    if (JSON.parse(res).data[0].wea.indexOf("雨") != -1) {
                        setBgweather(2)
                        axios.post('/background/getselbg', { bgplace: 2, bgweather: 2 }).then(res => {
                            // console.log(res.data[0].bgimg);
                            setBgimg(res.data[0].bgimg)
                        })
                        axios.post('/background/getbg', { bgweather: 2, bgplace: 2 }).then(res => {
                            console.log(res.data);
                            setBackground(res.data)
                        })
                    } else {
                        setBgweather(1)
                        axios.post('/background/getselbg', { bgplace: 2, bgweather: 1 }).then(res => {
                            // console.log(res.data[0].bgimg);
                            setBgimg(res.data[0].bgimg)
                        })
                        axios.post('/background/getbg', { bgweather: 1, bgplace: 2 }).then(res => {
                            console.log(res.data);
                            setBackground(res.data)
                        })
                    }

                });
        }
    }, [])


    useFocusEffect(React.useCallback(() => {
        AsyncStorage.getItem('user').then(
            dat => {
                let data = JSON.parse(dat)
                console.log(data);
                if (data) {
                    axios.post('/crop/getallmycrops', { userid: data.userid }).then(res => {
                        setMycrops(res.data)
                        setBgplace(res.data[num].bgplace)
                        console.log(res.cropname);
                        setCropList(res.cropname)
                        // AsyncStorage.setItem('mycropsid', JSON.stringify([{id: mycrops[num].id}, {cropsid: mycrops[num].cropsid}]))
                        axios.post('/crop/tip', { cropsid: mycrops[num].cropsid }).then(res => {
                            setTips(res.data)
                        })
                    })
                    console.log(999888777666555);
                    console.log(data.cityname);
                    axios({
                        method: 'post',
                        url: 'https://yiketianqi.com/free/week?unescape=1&appid=21379188&appsecret=h2vVMp6V&city=' + data.cityname,
                        responseType: 'stream'
                    })
                        .then(async function (res) {
                            console.log(999888777666555);
                            setTemday(JSON.parse(res).data[0].tem_day)
                            setTemnight(JSON.parse(res).data[0].tem_night)
                            setWeather(JSON.parse(res).data[0])
                            console.log(res);
                            if (JSON.parse(res).data[0].wea.indexOf("雨") != -1) {
                                setBgweather(2)
                                console.log("雨雨雨雨雨");
                                console.log(bgplace);
                                await axios.post('/background/getselbg', { bgplace: bgplace, bgweather: 2 }).then(res => {
                                    // console.log(res.data[0].bgimg);
                                    setBgimg(res.data[0].bgimg)
                                    console.log("雨雨雨雨雨1");
                                })
                                await axios.post('/background/getbg', { bgweather: 2, bgplace: bgplace }).then(res => {
                                    console.log("雨一直下");
                                    console.log(res.data);
                                    setBackground(res.data)
                                    console.log("雨雨雨雨雨2");
                                })
                            } else {
                                console.log(1111121321);
                                setBgweather(1)
                                await axios.post('/background/getselbg', { bgplace: bgplace, bgweather: 1 }).then(res => {
                                    // console.log(res.data[0].bgimg);
                                    setBgimg(res.data[0].bgimg)
                                    console.log("晴1");
                                })
                                await axios.post('/background/getbg', { bgweather: 1, bgplace: bgplace }).then(res => {
                                    console.log(res.data);
                                    setBackground(res.data)
                                    console.log("晴2");
                                })
                            }

                        });
                }
            }
        )

    }, []))
    // const mybg = ()=>{
    //     useEffect(()=>{
    //         console.log('1+1');
    //         console.log(bgimg);
    //         return bgimg
    //     }, [bgimg])
    // }
    const changeBg = (bg, bgid) => {
        // console.log(bg);
        setBgimg(bg)
        // 室外
        if (bgid == 5 || bgid == 6 || bgid == 7) {
            axios.post('/crop/updatebg', { id: user.userid, bgplace: 2 }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    setBgplace(2)
                    // 判断如果下雨，或室外温度与适宜生长温度相差3℃以上，心情值--
                    if (bgweather == 2 || (temday - mycrops[num].maxtemp > 3 && mintemp - mycrops[num].mintemp > 3)) {
                        showwatermodal()
                        axios.post('/crop/downgrowth', { id: mycrops[num].id, growth: mycrops[num].growth, }).then(res => {
                            if (res.code == 200) {
                                axios.post('/crop/getallmycrops', { userid: user.userid }).then(res => {
                                    setMycrops(res.data)
                                })
                            }
                        })
                    }
                }
            })
        } else if (bgid == 2 || bgid == 3 || bgid == 4) {   // 室内阳台
            axios.post('/crop/updatebg', { id: user.userid, bgplace: 3 }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    setBgplace(3)
                    if (bgweather == 2) {
                        axios.post('/crop/updategrowth', { id: mycrops[num].id, growth: mycrops[num].growth, }).then(res => {
                            if (res.code == 200) {
                                axios.post('/crop/getallmycrops', { userid: user.userid }).then(res => {
                                    setMycrops(res.data)
                                })
                            }
                        })
                    }
                }
            })
        }
    }
    const tipp = () => {
        setShowtip(true)

        setTimeout(() => {
            setShowtip(false)
        }, 3000)
    }
    const showToo = () => {
        setToomuch(true)

        setTimeout(() => {
            setToomuch(false)
        }, 3000)
    }
    const showtipmodal = () => {
        setShowinfo(!showinfo)
    }
    const showwatermodal = () => {
        console.log(987654321);
        setShowwater(true)
        setTimeout(() => {
            setShowwater(false)
        }, 3000)
    }
    return <ImageBackground source={bgimg ? { uri: baseURL + bgimg } : require('../../../images/mycrops/bgs/12.jpg')} style={{ width: '100%', height: '100%', justifyContent: 'space-between', ...style }}>
        {/* return <ImageBackground source={require('../../../images/mycrops/bgs/1.jpg')} style={{ width: '100%', height: '100%', justifyContent: 'space-between', ...style }}> */}
        <Modal
            animationType="slide"
            transparent={true}
            visible={showtip}
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text>距离下次浇水还有{mycrops.length > 0 ? mycrops[num].nowgrowday % mycrops[num].waterday : ''}天，
                        距离下次施肥还有{mycrops.length > 0 ? mycrops[num].nowgrowday % mycrops[num].fertilize : ''}天</Text>
                    {/* <Text>{tips.length > 0 ? tips[Math.floor(Math.random() * 3) + 1].tiptext : ''}</Text> */}
                </View>
            </View>
        </Modal>
        <Modal
            animationType="slide"
            transparent={true}
            visible={showwater}
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text>正在下雨哦请不要把我放在外面/(ㄒoㄒ)/~~</Text>
                </View>
            </View>
        </Modal>
        <Modal
            animationType="slide"
            transparent={true}
            visible={toomuch}
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text>浇水太多啦，我要被淹死啦</Text>
                </View>
            </View>
        </Modal>
        <Modal
            animationType="slide"
            transparent={true}
            visible={showinfo}
            onRequestClose={() => {
                setShowinfo(!showinfo)
            }}
        >
            <View style={styles.centeredView1}>
                <ScrollView style={styles.modalView1}>
                    {
                        tips.length > 0 ?
                            <View>
                                <Text style={{ color: '#7BCBB9', marginTop: 8 }}>1、什么是心情值</Text>
                                <Text style={{ color: 'rgb(62, 62, 62)' }}>心情值表示作物生长状态。</Text>
                                <Text style={{ color: 'rgb(62, 62, 62)' }}>①心情值越高，作物生长状态越好，适当浇水会提高心情值;</Text>
                                <Text style={{ color: 'rgb(62, 62, 62)' }}>②当心情值低于60时，作物生长易出现问题，要注意关注植物状态，浇水或雨天将植物放置在室外会降低心情值</Text>
                                <Text style={{ color: 'rgb(100, 100, 100)' }}>注：作物心情值为模拟您当前种植植物的生长状态，数据仅供参考，真实作物状态会受多种因素影响</Text>
                                <Text style={{ color: '#7BCBB9', marginTop: 8 }}>2、距离下次浇水、施肥的时间</Text>

                                <View>
                                    <Text style={{ color: 'rgb(62, 62, 62)', marginTop: 5 }}>浇水：当前阶段需要每{mycrops[num].waterday}天浇水一次，距离下次浇水还有{mycrops[num].nowgrowday % mycrops[num].waterday}天</Text>
                                    <Text style={{ color: 'rgb(62, 62, 62)', marginTop: 5 }}>施肥：当前阶段需要每{mycrops[num].fertilize}天施肥一次，距离下次施肥还有{mycrops[num].nowgrowday % mycrops[num].fertilize}天</Text>
                                </View>
                                <Text style={{ color: '#7BCBB9', marginTop: 8 }}>3、作物种植技巧</Text>
                                {tips.map((item, index) => {
                                    return <Text style={{ color: 'rgb(62, 62, 62)', marginTop: 5 }}>({index + 1}) {item.tiptext}</Text>
                                })}


                                <View style={{ alignItems: 'center' }}>
                                    <TouchableHighlight
                                        style={{ ...styles.openButton, backgroundColor: '#9AD37A', marginTop: 10, width: '50%', justifyContent: 'center', alignItems: 'center' }}
                                        onPress={() => {
                                            setShowinfo(!showinfo);
                                        }}
                                    >
                                        <Text style={styles.textStyle}>关闭</Text>
                                    </TouchableHighlight>
                                </View>

                                <Btn style={{ width: '80%', height: 50, }}></Btn>

                            </View>
                            :
                            <View>
                                <Text>心情值表示作物生长状态，当心情值越高，作物生长越好，当心情值&lt;60时，作物生长易出现问题，要注意关注植物状态。（作物心情值为模拟您当前种植植物的生长状态，数据仅供参考，真实作物状态会受多种因素影响）</Text>
                                <View style={{ alignItems: 'center' }}>
                                    <TouchableHighlight
                                        style={{ ...styles.openButton, backgroundColor: '#9AD37A', marginTop: 10, width: '50%', justifyContent: 'center', alignItems: 'center' }}
                                        onPress={() => {
                                            setShowinfo(!showinfo);
                                        }}
                                    >
                                        <Text style={styles.textStyle}>关闭</Text>
                                    </TouchableHighlight>
                                </View>

                                <Btn style={{ width: '80%', height: 50, }}></Btn>
                            </View>


                    }
                </ScrollView>
            </View>
        </Modal>
        {
            mycrops.length != 0 ?
                <View style={{ width: '100%', height: '100%' }}>
                    <View style={{ flexDirection: 'row', marginTop: 0, height: '4%', alignItems: 'center' }}>
                        <View style={{ width: '20%', backgroundColor: '#fff', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
                            <ModalDropdown options={cropList}
                                defaultValue={cropList[0]}
                                defaultIndex={0}
                                dropdownStyle={{ height: 'auto', width: '20%', marginLeft: -33.7, marginTop: -16 }}
                                onSelect={index => onChange(index)}
                            />
                        </View>
                        <View style={{ width: '60%', alignItems: 'center' }}>
                            <Text style={{ fontSize: 20, color: 'white' }}>{temnight}℃~{temday}℃</Text>
                        </View>
                        <View style={{ width: '20%', alignItems: 'flex-end' }}>
                            <AntDesign name="pluscircleo" size={24} color="black" onPress={toAdd} />
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', height: '96%' }}>
                        <View style={{ width: '27.5%' }}>
                            <ActionButton buttonColor="rgba(231,76,60,1)" position='left' verticalOrientation='up'>
                                {
                                    background.map(item => {
                                        return <ActionButton.Item buttonColor='#9b59b6' title={item.bgplace == 2 ? '室外' : '室内'} onPress={() => changeBg(item.bgimg, item.bgid)} key={item.bgid}>
                                            <Image source={{ uri: baseURL + item.bgimg }} style={{ borderRadius: 50, width: 52, height: 52 }}></Image>
                                        </ActionButton.Item>
                                    })
                                }
                            </ActionButton>
                        </View>
                        <View style={{ width: '45%', alignItems: 'center', justifyContent: 'space-between' }}>
                            <View style={{ alignItems: 'center', marginTop: 50 }}>
                                <View style={{ width: '100%', justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', height: 40 }}>
                                    <View style={styles.container1}>
                                        <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
                                            colors={['#C1F0FF', '#C1F0FF']}
                                            style={{ width: `${mycrops[num].nowgrowday / mycrops[num].growday * 100}%`, height: 8 }}>
                                        </LinearGradient>
                                    </View>
                                    <Image source={{ uri: baseURL + mycrops[num].growimg }} style={{ width: '20%', height: 50, resizeMode: 'contain' }}></Image>
                                </View>
                                <Text style={{ fontSize: 11 }}>距离
                                    {mycrops[num].nowgrownum == 4 && "成熟"}
                                    {mycrops[num].nowgrownum == 3 && "开花"}
                                    {mycrops[num].nowgrownum == 2 && "旺盛生长"}
                                    {mycrops[num].nowgrownum == 1 && "出苗"}

                                    只有{mycrops[num].growday - mycrops[num].nowgrowday}天啦</Text>
                            </View>

                            <View style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'flex-end', bottom: '16%' }}>
                                <TouchableOpacity style={[{ width: w, height: h }, getimgW(baseURL + mycrops[num].growimg)]} onPress={tipp} activeOpacity={1}>
                                    <Image source={{ uri: mycrops[num] ? baseURL + mycrops[num].growimg : '' }} style={[{ width: w, height: h, resizeMode: 'contain', bottom: 20 }, getimgW(baseURL + mycrops[num].growimg)]}></Image>
                                </TouchableOpacity>
                                <Image on source={{ uri: pot[0] ? baseURL + pot[0].potimg : '' }} style={[{ width: w1, height: h1, bottom: 50 }, getimgW1(pot[0] ? baseURL + pot[0].potimg : '')]}></Image>

                            </View>

                        </View>
                        <View style={{ width: '27.5%', justifyContent: 'space-between' }}>
                            <View style={{ alignItems: 'center', backgroundColor: '#F8FDB5', width: 100, height: 68, borderRadius: 30, justifyContent: 'center', marginTop: 180 }}>
                                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                    <Text style={{ color: '#EE9C6F' }}>心情值</Text>
                                    <AntDesign name="infocirlceo" size={18} color="gray" style={{ marginLeft: 5 }} onPress={showtipmodal} />
                                </View>
                                <Text style={{ fontSize: 16 }}>{mycrops[num].growth}</Text>
                            </View>
                            <View style={{}}>
                                <Animated.View
                                    {...panResponder.panHandlers}
                                    style={[pan.getLayout(), {
                                        transform: [{
                                            rotateZ: rotateValue.interpolate({ // 旋转，使用插值函数做值映射
                                                inputRange: [0, 1],
                                                outputRange: ['0deg', '360deg']
                                            })
                                        }]
                                    }]}
                                >
                                    <Image source={require('../../../images/mycrops/1.png')} style={{ width: 120, height: 220, resizeMode: 'contain' }}></Image>
                                </Animated.View>
                            </View>
                        </View>
                    </View>
                </View>
                :
                <View style={{ width: '100%', height: '100%' }}>
                    <View style={{ flexDirection: 'row', marginTop: 0, height: '4%', alignItems: 'center' }}>
                        <View style={{ width: '20%', backgroundColor: '#fff', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
                            <ModalDropdown options={cropList.length == 0 ? cropList : cropList}
                                defaultValue={cropList[0]}
                                defaultIndex={0}
                                dropdownStyle={{ height: 'auto', width: '20%', marginLeft: -33.7, marginTop: -16 }}
                                onSelect={onChange}
                            />
                        </View>
                        <View style={{ width: '60%', alignItems: 'center' }}>
                            <Text style={{ fontSize: 20, color: 'white' }}>26℃</Text>
                        </View>
                        <View style={{ width: '20%', alignItems: 'flex-end' }}>
                            <AntDesign name="pluscircleo" size={24} color="black" onPress={toAdd} />
                        </View>
                    </View>
                    <Text>还没有作物哦，点击右上角添加作物</Text>
                </View>
        }
    </ImageBackground>
}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1
    },
    scrollStyle: {
        flex: 1,
    },
    tabContainer: {
        width: screenW,
        flexDirection: 'row',
        alignItems: 'center',
        height: '5%',
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderBottomColor: 'gray'
    },
    tabStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    container1: {
        // justifyContent: 'flex-start',
        width: '80%',
        paddingVertical: 0,
        backgroundColor: '#fff'
    },
    bottomTab: {
        position: 'absolute',
        // borderTopColor: 'lightgray',
        borderWidth: 1,
        // marginTop: screenH-50,
        // bottom: 220
    },
    centeredView: {
        flex: 1,
        // justifyContent: "center",
        // alignItems: "center",
        marginTop: '30%'
    },
    centeredView1: {
        flex: 1,
        // marginTop: '20%',
        // padding: 10,
        width: '100%',
        height: screenH,
        // marginTop: '15%',
        backgroundColor: 'rgba(0,0,0,0.5)',
        alignItems: 'center',
        justifyContent: 'center'
    },
    modalView: {
        margin: 20,
        backgroundColor: "rgba(255,255,255,0.8)",
        borderRadius: 15,
        padding: 15,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        justifyContent: 'center',
    },
    modalView1: {
        margin: 30,
        padding: 30,
        marginBottom: 20,
        paddingBottom: 50,
        backgroundColor: "#fff",
        borderRadius: 5,
        // alignItems: "center",
        maxHeight: '65%',
        // shadowColor: "#000",
        // shadowOffset: {
        //     width: 0,
        //     height: 0
        // },
        // shadowOpacity: 0.25,
        // shadowRadius: 3.84,
        // elevation: 5
    },
    openButton: {
        backgroundColor: "#F194FF",
        borderRadius: 20,
        padding: 10,
        elevation: 2
    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center"
    },
    modalText: {
        marginBottom: 15,
        textAlign: "center"
    },
});
export default Page1; 